<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div>
    <h1>数据代理</h1>
  </div>
</body>
<script>

  let vm = {
    _data: {
      name: "xiaoming",
      age: 22,
      count: 0
    }
  }

  console.log(vm,"vm");
  

  // 我们配置的数据放在了vm的_data身上
  // 因为this也好, 插值也好, 都是直接找的vm对象, 所以每次拿数据都要通过vm._data来拿
  // 所以我们希望把_data上的属性, 在vm中放一份, 我们读取和修改都是直接操作的是vm身上的数据
  // vm身上的数据被获取或者被修改的时候, 会通知_data去读或者该值
  // 以上的操作就是数据代理的操作

  for (let key in vm._data) {
    /* 
    Object.defineProperty(obj,propName,{})
      - 主要是对一个已经存在的对象中的属性进行修改
*/
    Object.defineProperty(vm, key, {

      get(){
        return vm._data[key]
      },
      set(newVal){
        console.log("新的值",newVal);
      }


    })


  }





</script>

</html>